<template>
  <div class="enterprise">
    <!-- 搜索  -->
    <div class="Banner">
      <br />
      <div>
        <div style="margin: 0 auto; width: 850px; font-size: 22px; color: #fff">
          市场洞察·企业分析
        </div>
        <!-- 中国石油天然气股份有限公司管道分公司 -->
        <div class="search_input">
          <!-- :value="queryValue ? queryValue : from.company_name" -->
          <el-input
            class="inputt"
            v-model="from.company_name"
            :value="queryValue ? queryValue : from.company_name"
            type="text"
          />
          <button class="btnn" @click="chaxun()">
            <img
              src="../../assets/img/sousuo.png"
              style="width: 21px; height: 21px"
            />
            查询
          </button>
        </div>
      </div>
    </div>

    <div class="db" v-if="zwsj == false">
      <!-- XXX股份有限公司 -->
      <div>
        <div class="Center1">
          <div class="df">
            <div class="cl1">
              <div class="logo1">
                <img src="../../assets/newimg/gys.png" alt="" />
              </div>
            </div>
            <div class="cr1">
              <div class="title1">
                <div class="text1" style="display: inline-block">
                  <span> {{ route.query.name }}</span>
                  <span v-if="show">{{ dta.title }}</span>
                </div>

                <div class="text2">
                  <span style="padding: 5px 5px 5px 0">公司简介</span>
                  <span class="ov">
                    <span v-if="show">
                      {{ signalsRadio1.xiangqing.businessScope }}
                    </span>
                    <span v-if="show">{{ dta.businessScope }}</span>
                    <!-- <span>{{ dta.businessScope }}</span> -->
                  </span>
                </div>
                <div class="text3">
                  <div class="t1">
                    注册资本
                    <!-- <span>
                      {{
                        signalsRadio1.xiangqing.regCapital /
                          (10000).toFixed(0) +
                        "万"
                      }}
                    </span> -->

                    <!-- <span v-if="show">
                      {{ dta.countyid / (10000).toFixed(0) + "万" }}
                    </span> -->
                    <span>
                      {{ jine(dta.regCapital) }}
                      <!-- {{ dta.regCapital / (10000).toFixed(0) + "万" }} -->
                    </span>
                    <!-- 人民币 -->
                  </div>
                  <div class="t2">
                    法定代表人
                    <!-- <span v-if="show">{{ dta.representative }}</span> -->
                    <!-- <span v-if="show">{{ dta.representative }}</span> -->
                    <span>
                      {{ signalsRadio1.xiangqing.representative }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="xian mt20"></div>
          <div
            class="tac mt10"
            style="color: #f43107; cursor: pointer"
            @click="chakan()"
          >
            查看更多公司信息
          </div>
        </div>
        <!-- 暂无数据 -->
      </div>

      <!-- tabs -->
      <div class="tabs">
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane label="招标数据" name="first">
            <div>
              <div class="dataNum">
                <div class="top">
                  <div class="xian"></div>
                  <div class="ml10">招标数据概览</div>
                </div>
                <div class="df shu">
                  <div>
                    <div>采购次数（次）</div>
                    <div class="sz" v-for="item in Gai">
                      {{ item }}
                    </div>
                  </div>
                  <div>
                    <div style="width: 140px">采购金额（{{ wan }}）</div>
                    <div class="sz">
                      <span v-for="item in Cai"> {{ item }}</span>
                    </div>
                    <!-- <div class="sz">60.2</div> -->
                  </div>
                  <div>
                    <div style="width: 128px">供应商数量（家）</div>
                    <div class="sz" v-for="item in Gong">{{ item }}</div>
                  </div>
                </div>
              </div>
              <!-- 采购金额趋势 -->
              <div class="trened">
                <!-- 柱形图 -->
                <div class="bottom">
                  <div class="bottom_l">
                    <div style="margin-left: 20px; margin-top: 20px">
                      招标金额趋势
                    </div>
                    <div id="zhu1" style=" height: 95%"></div>
                  </div>
                  <div class="bottom_r">
                    <div style="margin-left: 20px; margin-top: 20px">
                      采购次数趋势
                    </div>
                    <div
                      id="zhu2"
                      style="height: 95%;"
                    ></div>
                  </div>
                </div>

                <!-- 表格 -->
                <el-table
                  :data="Data"
                  style="width: 100%; margin-top: 30px"
                  max-height="400"
                  :header-cell-style="{
                    background: '#FCE2E2',
                    color: '#333333',
                  }"
                >
                  <el-table-column label="排序" type="index" width="80" />

                  <el-table-column
                    prop="key"
                    label="供应商名称"
                    :show-overflow-tooltip="true"
                    width="180"
                  >
                    <template #default="{ row }">
                      <div @click="Details(row.key)">{{ row.key }}</div>
                    </template>
                  </el-table-column>

                  <!-- <el-table-column
                    prop="zb_num"
                    label="参与次数"
                    width="180"
                    align="center"
                  /> -->
                  <el-table-column
                    prop="zb_num"
                    label="采购次数"
                    align="center"
                  />
                  <el-table-column
                    prop="zb_price"
                    label="交易总金额(万元)"
                    align="center"
                  >
                    <template #default="scope">
                      {{ (scope.row.zb_price / 10000).toFixed(2) }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="max_time"
                    label="最后一次合作时间"
                    align="center"
                  />
                </el-table>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="中标数据" name="second">
            <div>
              <div class="dataNum">
                <div class="top">
                  <div class="xian"></div>
                  <div class="ml10">中标数据概览</div>
                </div>
                <div class="df shu">
                  <div>
                    <div>中标次数（次）</div>
                    <div class="sz" v-for="item in Zhong">
                      {{ item }}
                    </div>
                  </div>
                  <div>
                    <div style="width: 140px">中标金额（{{ wan1 }}）</div>
                    <div class="sz">
                      <span v-for="item in Zhong1"> {{ item }}</span>
                    </div>
                    <!-- <div class="sz">60.44</div> -->
                  </div>
                  <div>
                    <div style="width: 128px">采购商数量（家）</div>
                    <div class="sz" v-for="item in Zhong2">{{ item }}</div>
                  </div>
                </div>
              </div>
              <!-- 采购金额趋势 -->
              <div class="trened">
                <!-- 柱形图 -->
                <div class="bottom">
                  <div class="bottom_l">
                    <div style="margin-left: 20px; margin-top: 20px">
                      中标金额趋势
                    </div>
                    <div id="zhu3" style="width: 540px; height: 480px"></div>
                  </div>
                  <div class="bottom_r">
                    <div
                      id="zhu4"
                      style="width: 560px; height: 480px; margin-top: 20px"
                    ></div>
                  </div>
                </div>
                <!-- <div class="mt30 df1">
                  <div>111</div>
                  <div class="mr10">222</div>
                </div> -->

                <!-- 表格 -->
                <el-table
                  :data="zbDataTbale"
                  style="width: 100%; margin-top: 10px"
                  max-height="400"
                >
                  <el-table-column label="排序" type="index" width="80" />

                  <el-table-column
                    prop="key"
                    label="供应商名称"
                    :show-overflow-tooltip="true"
                    width="180"
                  />

                  <!-- <el-table-column
                    prop="zb_num"
                    label="参与次数"
                    width="180"
                    align="center"
                  /> -->
                  <el-table-column
                    prop="zb_num"
                    label="中标次数"
                    align="center"
                  />
                  <el-table-column
                    prop="zb_price"
                    label="交易总金额(万元)"
                    align="center"
                  >
                    <template #default="scope">
                      {{ (scope.row.zb_price / 10000).toFixed(2) }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="max_time"
                    label="最后一次合作时间"
                    align="center"
                  />
                </el-table>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 底部 -->
    <el-empty v-else description="暂无数据" />
  </div>
  <footer>
    <fot></fot>
  </footer>
</template>

<script lang="ts" setup>
import { ref, onUnmounted, onMounted, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import "../../assets/com/com.scss";
import {
  businessText,
  businessGai,
  businessData,
  businessAmount,
  businessFrequency,
  businessZhong,
  successfulBidder,
  zbNumber,
  successData,
} from "../../Api/market/index";
import fot from "../../components/fotter/index.vue";
import * as echarts from "echarts";
import Map from "../../components/Map/Map.vue";
import { useRadio1Store } from "../../pain/search/search";
import router from "../../router";
import { toFixed } from "ant-design-vue/es/input-number/src/utils/MiniDecimal";
onMounted(() => {
  e_value();
});
function e_value() {
  zhu3();
  zhu4();
  abc();
  a();
  b();
  c();
  d();
  zanwu();
}
const route = useRoute();
const luyou = ref();
if (route.query.name) {
  luyou.value = 1;
} else {
  luyou.value = 2;
}

const from = reactive({
  company_name:
    luyou.value == 1 ? route.query.name : "中国人民财产保险股份有限公司",
});
const signalsRadio1 = useRadio1Store() as any;
// 查看更多
const chakan = () => {
  if (route.query.name) {
    const href = router.resolve({
      path: "/disposition",
      query: {
        // id: signalsRadio1.id,
        name: signalsRadio1.company_name,
        id: 2,
      },
    });
    window.open(href.href, "_blank");
  } else {
    window.open(
      "http://www.6ocbx.com/disposition??id=2&name=中国人民财产保险股份有限公司",
      "_blank"
    );
  }
};
//金额转换
const jine = (event) => {
  // console.log(event);
  var a = null;
  if (event > 10000 && 100000000 > event) {
    // console.log(event, "555");
    a = event / 10000;
    a = a.toFixed(3) + "万元";
  } else if (event > 100000000) {
    a = event / 1000000000;
    a = a.toFixed(3) + "亿元";
    // a=event/100000000+'亿元'
  } else if (event < 10000) {
    a = event;
    a = a.toFixed(3) + "元";
  }
  return a;
};
// 查询
const chaxun = () => {
  e_value();
  zanwu();
};

const zwsj = ref(false);
const zanwu = () => {
  businessText(from).then((res) => {
    dta.value = res.data.data[0];
    // console.log(dta.value);
    if (res.data.data.length == 0) {
      zwsj.value = true;
      let timer = null;
      // 每5s刷新数据
      timer = setInterval(() => {
        window.location.reload();
      }, 3000);
    } else {
      zwsj.value = false;
    }
  });
};

const activeName = ref("first");

const queryValue = ref(route.query.name) as any;
const show = ref(!route.query.name);

signalsRadio1.company_name = queryValue.value;
signalsRadio1.getcompany_names() as any;

// 柱形图
const mapDataTime = ref<string[]>([]);
const mapDatajg = ref<number[]>([]);

// 柱形图 2
const DataTime = ref<string[]>([]);
const Datacaigou_num = ref<number[]>([]);

// 柱形图3
const zbData = ref<number[]>([]);
const zbTime = ref<string[]>([]);

// 柱形图4
const zbData4 = ref<number[]>([]);
const zbTime4 = ref<string[]>([]);
// 表格数据
const Data = ref([]);

// 柱形图  采购金额趋势
function zhu1() {
  // 基于准备好的dom，初始化echarts实例
  let Chart = echarts.init(document.getElementById("zhu1"));

  // 绘制图表
  let options = {
    backgroundColor: "#fff",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      top: "10%",
      right: "0%",
      left: "10%",
      bottom: "10%",
    },
    xAxis: [
      {
        type: "category",
        data: mapDataTime.value,
        axisLine: {
          lineStyle: {
            color: "#bcc2cc",
          },
        },
        axisLabel: {
          margin: 10,
          color: "#A9B1BE",
          textStyle: {
            fontSize: 14,
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        max: a.maxValue,
        min: "0",
        type: "value",
        name: "",
        nameTextStyle: {
          color: "#C1C6CF",
          fontSize: 12,
          align: "right",
          padding: 30,
        },
        axisLabel: {
          formatter: "{value}",
          color: "#A1A7B3",
          fontSize: 14,
        },

        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#a9b1be",
          },
        },
        splitLine: {
          lineStyle: {
            color: "#fff",
            type: "dashed",
          },
        },
        scale: true, //自适应
      },
    ],
    series: [
      {
        type: "bar",
        data: mapDatajg.value,
        barWidth: "18px",
        barCategoryGap: "150%",
        itemStyle: {
          color: "#55b89e",
          barBorderRadius: [2, 2, 0, 0],
        },
      },
    ],
  };

  // 渲染图表
  Chart.setOption(options);
  onUnmounted(() => {
    Chart.dispose();
  });

  // 自适应

  // window.onresize = Chart.resize;
  window.addEventListener("resize", function () {
    Chart.resize();
  });
}
// 请求接口渲染柱形图 one
function a() {
  businessAmount(from).then((res) => {
    const responseData = [...res.data.data];
    mapDatajg.value = responseData.map((item) => Math.floor(item.jg / 10000));
    mapDataTime.value = responseData.map((item) => item.key);
    zhu1();
    const abs = responseData;
    let maxValue = null;
    let minValue = null;
    if (zwsj.value == true) {
      minValue = abs[0].key;
      maxValue = abs[0].jg;
    }
    abs.forEach((element) => {
      if (element.jg > maxValue) {
        maxValue = element.jg;
      }
    });
  });
}
// 柱形图 2
function zhu2() {
  // 基于准备好的dom，初始化echarts实例
  let Chart = echarts.init(document.getElementById("zhu2"));

  // 绘制图表
  let options = {
    backgroundColor: "#fff",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      top: "10%",
      right: "0%",
      left: "10%",
      bottom: "10%",
    },
    xAxis: [
      {
        type: "category",
        data: DataTime.value,
        axisLine: {
          lineStyle: {
            color: "#bcc2cc",
          },
        },
        axisLabel: {
          margin: 10,
          color: "#A9B1BE",
          textStyle: {
            fontSize: 14,
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        max: b.maxValue,
        min: "0",
        type: "value",
        name: "",
        nameTextStyle: {
          color: "#C1C6CF",
          fontSize: 12,
          align: "right",
          padding: 30,
        },
        axisLabel: {
          formatter: "{value}",
          color: "#A1A7B3",
          fontSize: 14,
        },

        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#a9b1be",
          },
        },
        splitLine: {
          lineStyle: {
            color: "#fff",
            type: "dashed",
          },
        },
        scale: true, //自适应
      },
    ],
    series: [
      {
        type: "bar",
        data: Datacaigou_num.value,
        barWidth: "18px",
        barCategoryGap: "150%",
        itemStyle: {
          color: "#55b89e",
          barBorderRadius: [2, 2, 0, 0],
        },
      },
    ],
  };

  // 渲染图表
  Chart.setOption(options);
  onUnmounted(() => {
    Chart.dispose();
  });

  // 自适应

  // window.onresize = Chart.resize;
  window.addEventListener("resize", function () {
    Chart.resize();
  });
}
// 请求接口渲染柱形图 two
function b() {
  businessFrequency(from).then((res) => {
    // console.log(res);
    const response = [...res.data.data];
    Datacaigou_num.value = response.map((item) => item.caigou_num);
    DataTime.value = response.map((item) => item.key);
    const abs = response;
    let maxValue = null;
    if (zwsj.value == true) {
      maxValue = abs[0].caigou_num;
    }
    abs.forEach((element) => {
      if (element.caigou_num > maxValue) {
        maxValue = element.caigou_num;
      }
    });
    // console.log("最大值市场规模: " + maxValue);
    zhu2();
    zhu4();
  });
}

function zhu3() {
  // 基于准备好的dom，初始化echarts实例
  let Chart = echarts.init(document.getElementById("zhu3"));

  // 绘制图表
  let options = {
    backgroundColor: "#fff",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      top: "10%",
      right: "0%",
      left: "10%",
      bottom: "10%",
    },
    xAxis: [
      {
        type: "category",
        data: zbTime.value,
        axisLine: {
          lineStyle: {
            color: "#bcc2cc",
          },
        },
        axisLabel: {
          margin: 10,
          color: "#A9B1BE",
          textStyle: {
            fontSize: 14,
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        max: c.maxValue,
        min: "0",
        type: "value",
        name: "",
        nameTextStyle: {
          color: "#C1C6CF",
          fontSize: 12,
          align: "right",
          padding: 30,
        },
        axisLabel: {
          formatter: "{value}",
          color: "#A1A7B3",
          fontSize: 14,
        },

        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#a9b1be",
          },
        },
        splitLine: {
          lineStyle: {
            color: "#fff",
            type: "dashed",
          },
        },
        scale: true, //自适应
      },
    ],
    series: [
      {
        type: "bar",
        data: zbData.value,
        barWidth: "18px",
        barCategoryGap: "150%",
        itemStyle: {
          color: "#55b89e",
          barBorderRadius: [2, 2, 0, 0],
        },
      },
    ],
  };

  // 渲染图表
  Chart.setOption(options);
  onUnmounted(() => {
    Chart.dispose();
  });

  // 自适应

  // window.onresize = Chart.resize;
  window.addEventListener("resize", function () {
    Chart.resize();
  });
}
// 请求接口渲染柱形图 3
function c() {
  successfulBidder(from).then((res) => {
    const dataBar3 = [...res.data.data];
    zbData.value = dataBar3.map((item) => Math.floor(item.jg / 1000000));
    zbTime.value = dataBar3.map((item) => item.key);
    const abs = dataBar3;
    let maxValue = null;
    if (zwsj.value == true) {
      maxValue = abs[0].jg;
    }
    abs.forEach((element) => {
      if (element.jg > maxValue) {
        maxValue = element.jg;
      }
    });
    // console.log("最大值市场规模: " + maxValue);
    zhu3();
  });
}

function zhu4() {
  // 基于准备好的dom，初始化echarts实例
  let Chart = echarts.init(document.getElementById("zhu4"));

  // 绘制图表
  let options = {
    backgroundColor: "#fff",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      top: "10%",
      right: "0%",
      left: "10%",
      bottom: "10%",
    },
    xAxis: [
      {
        type: "category",
        data: zbTime4.value,
        axisLine: {
          lineStyle: {
            color: "#bcc2cc",
          },
        },
        axisLabel: {
          margin: 10,
          color: "#A9B1BE",
          textStyle: {
            fontSize: 14,
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        max: d.maxValue,
        min: "0",
        type: "value",
        name: "",
        nameTextStyle: {
          color: "#C1C6CF",
          fontSize: 12,
          align: "right",
          padding: 30,
        },
        axisLabel: {
          formatter: "{value}",
          color: "#A1A7B3",
          fontSize: 14,
        },

        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#a9b1be",
          },
        },
        splitLine: {
          lineStyle: {
            color: "#fff",
            type: "dashed",
          },
        },
        scale: true, //自适应
      },
    ],
    series: [
      {
        type: "bar",
        data: zbData4.value,
        barWidth: "18px",
        barCategoryGap: "150%",
        itemStyle: {
          color: "#55b89e",
          barBorderRadius: [2, 2, 0, 0],
        },
      },
    ],
  };
  // 渲染图表
  Chart.setOption(options);
  onUnmounted(() => {
    Chart.dispose();
  });

  // 自适应

  // window.onresize = Chart.resize;
  window.addEventListener("resize", function () {
    Chart.resize();
  });
}

// 请求接口渲染柱形图 4
function d() {
  zbNumber(from).then((res) => {
    const dataBar4 = [...res.data.data];
    // console.log(res);
    zbData4.value = dataBar4.map((item) => Math.floor(item.caigou_num / 1));
    zbTime4.value = dataBar4.map((item) => item.key);
    const abs = dataBar4;
    let maxValue = null;
    if (zwsj.value == true) {
      maxValue = abs[0].caigou_num;
    }
    abs.forEach((element) => {
      if (element.caigou_num > maxValue) {
        maxValue = element.caigou_num;
      }
    });
    // console.log("最大值市场规模: " + maxValue);
    zhu4();
  });
}
const dta = ref([]) as any;
const Gai = ref([]) as any;
const Cai = ref([]) as any;
const Gong = ref([]) as any;
const Zhong = ref([]) as any;
const Zhong1 = ref([]) as any;
const Zhong2 = ref([]) as any;
const zbDataTbale = ref([]) as any;
const wan = ref();
const wan1 = ref();
function abc() {
  // 概览
  businessGai(from).then((res) => {
    // console.log(res);
    Gai.value = res.data.data.caigou_num;
    Cai.value = res.data.data.caigou_price;
    // Cai.value = (res.data.data.caigou_price.value / 100000000).toFixed(1) + "";
    if (
      res.data.data.caigou_price.value > 10000 &&
      res.data.data.caigou_price.value < 100000000
    ) {
      wan.value = "万元";
      Cai.value = (res.data.data.caigou_price.value / 10000).toFixed(2) + "";
    } else if (res.data.data.caigou_price.value > 100000000) {
      wan.value = "亿元";
      Cai.value =
        (res.data.data.caigou_price.value / 100000000).toFixed(2) + "";
    } else {
      wan.value = "元";
      Cai.value = (res.data.data.caigou_price.value / 1).toFixed(2) + "";
    }
    // Cai.value = (res.data.data.caigou_price.value / 100000).toFixed(2) + "";
    // console.log(Cai.value);
    Gong.value = res.data.data.gongying_num;
  });

  // 中标数据概览
  businessZhong(from).then((res) => {
    // console.log(res);
    Zhong.value = res.data.data.caigou_num;
    if (
      res.data.data.caigou_price.value > 10000 &&
      res.data.data.caigou_price.value < 100000000
    ) {
      wan1.value = "万元";
      Zhong1.value = (res.data.data.caigou_price.value / 10000).toFixed(2) + "";
    } else if (res.data.data.caigou_price.value > 100000000) {
      wan1.value = "亿元";
      Zhong1.value =
        (res.data.data.caigou_price.value / 100000000).toFixed(2) + "";
    } else {
      wan1.value = "元";
      Zhong1.value = (res.data.data.caigou_price.value / 1).toFixed(2) + "";
    }
    // Zhong1.value =
    //   (res.data.data.caigou_price.value / 100000000).toFixed(2) + "";
    Zhong2.value = res.data.data.gongying_num;
  });

  //表格
  businessData(from).then((res) => {
    // console.log(res);
    Data.value = res.data.data;
  });

  // 中标表格
  successData(from).then((res) => {
    // console.log(res);
    zbDataTbale.value = res.data.data;
  });
}

// 表格跳转详情
const Details = (row) => {
  // console.log(row);
  // if (token) {
  // } else {
  //   ElMessage.error("请您先登录,登录成功之后才能查看详情");
  // }
  const href = router.resolve({
    path: "/disposition",
    query: {
      id: 2,
      name: row,
    },
  });
  window.open(href.href, "_blank");
};
</script>

<style lang="scss" scoped>
.ov {
  display: block;
  color: #333333;
  font-style: 14px;
  display: block;
  width: 900px;
  padding: 5px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ov:hover {
  white-space: normal;
  overflow: visible;
}
:deep(.el-tabs__item) {
  padding-left: 20px !important; /* 调整标题的位置 */
}

:deep(.el-input__wrapper) {
  box-shadow: none;
  background: none;
}

.enterprise {
  width: 100%;
  height: 100%;
  .Banner {
    width: 100%;
    height: 154px;
    background-image: url(../../assets/newimg/search.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .search_input {
      width: 850px;
      height: 66px;
      background: #ffffff;
      border-radius: 50px;
      margin: 0 auto;
      margin-top: 20px;
      position: relative;
    }

    // 搜索 按钮
    .btnn {
      width: 120px;
      height: 64px;
      border-radius: 50px;
      background: #f43107;
      border: 0;
      color: #fff;
      font-size: 22px;
      cursor: pointer;
      position: absolute;
      right: 1px;
      top: 1.2px;
    }

    // 输入框
    .inputt {
      width: 85%;
      height: 100%;
      border: 0;
      border-radius: 50px !important;
      outline: none;
      padding-left: 20px;
    }
  }
  .db {
    width: 1200px;
    margin: 10px auto;
    .Center1 {
      // height: 220px;
      background: #ffffff;
      // border: 1px solid rebeccapurple;
      position: relative;
      .xian {
        width: 1160px;
        height: 1px;
        background: #dddddd;
        border-radius: 0px;
        margin-left: 20px;
      }
      .cl1 {
        position: absolute;
        top: 20px;
        left: 20px;
        // margin: 20px 20px 0 20px;
        .logo1 {
          width: 100px;
          height: 100px;
          background: #e2e2e2;
          border-radius: 10px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .cr1 {
        .title1 {
          margin-top: 20px;
          margin-left: 141px;
          .text1 {
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 18px;
            color: #333333;
            // line-height: 20px;
          }
          .text2 {
            margin: 15px 0;
            font-weight: 400;
            font-size: 14px;
            color: #a9b1be;
            line-height: 14px;
            // height: 20px;
            display: flex;
          }
          .text3 {
            display: flex;
            .t1 {
              background: #fce2e0;
              color: #f43107;
              font-size: 14px;
              border-radius: 20px;
              padding: 3px 9px;
            }
            .t2 {
              background: #fce2e0;
              color: #f43107;
              font-size: 14px;
              border-radius: 20px;
              margin: 0 10px;
              padding: 3px 8px;
            }
          }
        }
      }
    }
    .tabs {
      margin-top: 10px;
      width: 1200px;
      height: 56px;
      background: #ffffff;
      // border: 1px solid rebeccapurple;
    }
    .dataNum {
      // margin-top: 10px;
      width: 1200px;
      height: 160px;
      background: #ffffff;
      // border: 1px solid rebeccapurple;
      // padding-top: 10px;
      .top {
        display: flex;
        margin-left: 20px;
        padding-top: 20px;
        .xian {
          width: 4px;
          height: 16px;
          background: #f43107;
          border-radius: 10px;
          margin-top: 1px;
        }
      }
      .shu {
        margin-top: 26px;
        margin-left: 144px;
        div {
          width: 33%;
          .sz {
            font-weight: bold;
            font-size: 30px;
            color: #f43107;
            margin-top: 15px;
          }
        }
      }
    }

    // footer
    .trened {
      margin-top: 10px;
      width: 1204px;
      height: 1016px;
      .top_top {
        width: 100%;
        height: 50%;
        background-color: #ffffff;
        // border: 1px solid rebeccapurple;
        margin-top: 10px;
      }

      .bottom {
        margin-top: 10px;
        // background-color: #ffffff;
        width: 100%;
        height: 51%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .bottom_l {
          width: 49.5%;
          height: 100%;
          background-color: #ffffff;
          // border: 1px solid rebeccapurple;
        }
        .bottom_r {
          // margin-top: 37px;
          width: 49.5%;
          height: 100%;
          background-color: #ffffff;
          // border: 1px solid rebeccapurple;
        }
      }
    }
  }
}

:deep(.el-tabs__nav-wrap::after) {
  background-color: transparent;
}
// :deep(.el-tabs__item) {
//   padding: 28px 20px !important;
// }

:deep(.el-tabs__active-bar) {
  background-color: #f43107;
}

:deep(.el-tabs__item.is-active) {
  color: #f43107;
}

footer {
  margin-top: 1100px;
}
:deep(.el-tabs__item) {
  padding-left: 20px !important;
  height: 56px;
  font-size: 16px;
  /* 调整标题的位置 */
}
.tac {
  height: 54px;
  margin: 0;
  line-height: 54px;
}
:deep(.el-tabs__item :hover){
  color: red;
}
:deep(.el-tabs__nav :hover){
  color: red;
}
:deep(.el-tabs__header){
  margin-bottom: 10px;
}

</style>
